<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="../css/eui.css">
    <style>

        /*全局样式*/
        body {
            margin: 0 auto;
            width: 100%;
            height: 100%;
            max-width: 1920px;
            background-color: #fff;
            font-family: arial, helvetica, sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
        }

        /*上面一块白条*/
        #head {
            width: 950px;
            height: 100px;
        }

        #middle {
            overflow: hidden;
        }

        /*左右两块div的样式*/
        #leftPart, #rightPart {
            text-align: center;
            margin: 0 auto;
            display: inline;
            width: 50%;
            /*max-width: 540px;*/
            background-color: #f9f9f9;
            float: left;
        }

        #leftPart > div {
            border-right: 1px solid black;
        }

        #leftPart > div > div {
            margin: 0 auto;
            padding-top: 80px;
            padding-bottom: 40px;
            width: 540px;
        }

        /*标题:CreateAccount的样式*/
        .title {
            font-size: 40px;
            line-height: 50px;
            font-weight: bold;
            text-align: center;
        }

        /*正文全局样式*/
        .content {
            padding: 0 60px;

        }

        /*输入框相关样式*/
        .text {
            line-height: 30px;
            font-weight: bold;
            text-align: left;
        }

        .item {
            margin: 15px 0;
        }

        .input {
            width: 100%;
            height: 40px;
            line-height: 30px;
            padding: 5px 10px;
            border-radius: 3px;
        }

        /*注册须知相关信息*/
        .info {
            margin: 35px 0;
            color: #666;
            line-height: 18px;
            font-size: 12px;
            text-align: left;
        }

        /*注册按钮*/
        .button {
            width: 100%;
            padding: 0;
            margin: 0 auto;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }

        /*右侧部分样式开始*/
        #rightPart > div {
            text-align: center;
            margin: 0 auto;
            padding: 170px 0;
            width: 400px;
        }

        #rightPart p {
            text-align: center;
        }

        #redundantSpace {
            height: 372px;
            margin: 0 !important;
            padding: 0 !important;
        }

        /*验证码相关*/
        #captcha {
            width: 70%;
            display: inline;
            float: left;
        }

        #random {
            width: 100px;
            display: inline;
            float: right;
            position: relative;
            bottom: 45px;
        }

        #random > p {
            text-align: center;
            font-size: 14px;
        }

    </style>
</head>
<body>
<div id="app">
    <!--最上方白条开始-->
    <div id="head"></div>
    <!--最上方白条结束-->

    <!--下方正文部分开始-->
    <div id="middle">
        <!--左侧输入框部分开始-->
        <div id="leftPart">
            <div>
                <div>
                    <p class="title">Create Account</p>
                    <div class="content">
                        <div class="item">
                            <p class="text">Username</p>
                            <el-input v-model="user.username"
                                      placeholder="Create Your Username(4-16 digits of letters or numbers)"
                                      class="input"></el-input>
                        </div>
                        <div class="item">
                            <p class="text">Create Your Password</p>
                            <el-input v-model="user.password"
                                      placeholder="Create Your Password(4-16 digits of letters or numbers)"
                                      show-password
                                      class="input"></el-input>
                        </div>
                        <div class="item">
                            <p class="text">Confirm Password</p>
                            <el-input v-model="user.passwordAgain"
                                      placeholder="Confirm Password(4-16 digits of letters or numbers)" show-password
                                      class="input"></el-input>
                        </div>
                        <div class="item">
                            <p class="text">Country</p>
                            <el-select v-model="user.country" filterable placeholder="Please Select" class="input">
                                <el-option
                                        v-for="label in countries"
                                        :value="label">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="item">
                            <p class="text">CAPTCHA</p>
                            <el-input v-model="captcha" class="input" id="captcha"
                                      placeholder="Please Input the Following Numbers"></el-input>
                            <el-tag type="info" id="random"><p class="text">{{random}}</p></el-tag>
                        </div>
                        <p class="info">
                            By clicking "Create my Account" I agree that:<br>
                            &bull;&nbsp;I may receive communication emails from MY SHOP about order and delivery.<br>
                            &bull;&nbsp;I may receive new products and promotion emails from MY SHOP.
                        </p>
                        <el-button type="danger" class="button" @Click="reg()">Create My Account</el-button>
                    </div>
                </div>
            </div>
        </div>
        <!--左侧输入框部分结束-->

        <!--右侧已有账号登录按钮部分开始-->
        <div id="rightPart">
            <div>
                <div class="item">
                    <p class="text">Already have an account ?</p>
                </div>
                <div class="item">
                    <el-button type="danger" class="button" @Click="location.href = '/user/login.html'">Sign in
                    </el-button>
                </div>
            </div>
            <div id="redundantSpace"></div>
        </div>
        <!--右侧已有账号登录按钮部分结束-->
    </div>
    <!--下方正文部分结束-->
</div>
</body>
<script src="../js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="../js/eui.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                user: {
                    username: "",
                    password: "",
                    passwordAgain: "",
                    country: ""
                },
                countries: [
                    "Afghanistan", "Albania", "Algeria", "Andorra", "Angola",
                    "Anguilla", "Antigua", "Barbuda", "Argentina", "Armenia",
                    "Aruba", "Australia", "Austria", "Azerbaijan", "Bahamas",
                    "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium",
                    "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia",
                    "Bosnia", "Herzegovina", "Botswana", "Brazil", "British Virgin Islands",
                    "Brunei", "Bulgaria", "Burkina Faso", "Burundi", "Cambodia",
                    "Cameroon", "Cape Verde", "Cayman Islands", "Chad", "Chile",
                    "China", "Colombia", "Congo", "Cook Islands", "Costa Rica",
                    "Cote D Ivoire", "Croatia", "Cruise Ship", "Cuba", "Cyprus",
                    "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic",
                    "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Estonia",
                    "Ethiopia", "Falkland Islands", "Faroe Islands", "Fiji", "Finland",
                    "France", "French Polynesia", "French West Indies", "Gabon", "Gambia",
                    "Georgia", "Germany", "Ghana", "Gibraltar", "Greece",
                    "Greenland", "Grenada", "Guam", "Guatemala", "Guernsey",
                    "Guinea", "Guinea Bissau", "Guyana", "Haiti", "Honduras",
                    "Hong Kong", "Hungary", "Iceland", "India", "Indonesia",
                    "Iran", "Iraq", "Ireland", "Isle of Man", "Israel", "Italy",
                    "Jamaica", "Japan", "Jersey", "Jordan", "Kazakhstan",
                    "Kenya", "Kuwait", "Kyrgyz Republic", "Laos", "Latvia",
                    "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein",
                    "Lithuania", "Luxembourg", "Macau", "Macedonia", "Madagascar",
                    "Malawi", "Malaysia", "Maldives", "Mali", "Malta",
                    "Mauritania", "Mauritius", "Mexico", "Moldova",
                    "Monaco", "Mongolia", "Montenegro", "Montserrat", "Morocco",
                    "Mozambique", "Namibia", "Nepal", "Netherlands", "Netherlands Antilles",
                    "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria",
                    "Norway", "Oman", "Pakistan", "Palestine", "Panama",
                    "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland",
                    "Portugal", "Puerto Rico", "Qatar", "Reunion", "Romania",
                    "Russia", "Rwanda", "Saint Pierre", "Miquelon", "Samoa",
                    "San Marino", "Satellite", "Saudi Arabia", "Senegal", "Serbia",
                    "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia",
                    "South Africa", "South Korea", "Spain", "Sri Lanka", "St Kitts",
                    "Nevis", "St Lucia", "St Vincent", "St. Lucia", "Sudan",
                    "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria",
                    "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Timor L'Este",
                    "Togo", "Tonga", "Trinidad", "Tobago", "Tunisia",
                    "Turkey", "Turkmenistan", "Turks", "Caicos", "Uganda",
                    "Ukraine", "United Arab Emirates", "United Kingdom", "Uruguay", "Uzbekistan",
                    "Venezuela", "Vietnam", "Virgin Islands (US)", "Yemen", "Zambia", "Zimbabwe"
                ],
                captcha: "",
                random: Math.floor(Math.random() * 8999 + 1000).toString(),
            }
        },
        methods: {
            reg() {
                if (v.captcha !== v.random) {
                    alert("验证码不正确");
                    return;
                } else if (v.user.password !== v.user.passwordAgain) {
                    alert("两次输入的密码不一致");
                    return;
                }
                axios.post("/user/reg", v.user).then(function (response) {
                    if (response.data.state !== 200) {
                        alert("注册失败," + response.data.message);
                    } else {
                        alert("注册成功,即将跳转登录页面...");
                        location.href = "/user/login.html";
                    }
                })
            }
        }
    })
</script>
</html>